<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>自适应图像</title>  
    <style>  
        body {  
            margin: 0;  
            padding: 0;  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            height: 100vh;  
            background-color: #f0f0f0; 
        }  
        #responsive-div {  
            height: 200px;  
            text-align: center;  
            line-height: 200px; 
            font-size: 24px; 
        }  
        @media (max-width: 399px) {  
            #responsive-div {  
                background-color: gray;  
            }  
        }  
        @media (min-width: 400px) and (max-width: 799px) {  
            #responsive-div {  
                background-color: red;  
            }  
        }  
        @media (min-width: 800px) {  
            #responsive-div {  
                background-color: blue;  
            }  
        }  
    </style>  
</head>  
<body>  
    <div>  
        <picture>  
            <source media="(min-width: 1280px)" srcset="sayt.jpg">  
            <source media="(min-width: 980px)" srcset="sayt.jpg">  
            <source media="(min-width: 768px)" srcset="sayt.jpg">  
            <img src="sayt.jpg" alt="Responsive Image">  
        </picture>  
    </div>
</body>  
</html>